<template>
	<div :class="disabled ? 'disabled' : ''" class="ip_box">
		<el-input ref="ip1" :disabled="disabled" v-model="ip1" maxlength="3" @input="ip1 = ip1.replace(/[^\d]/g, '')"
			@keyup.native="keyupEvent(1, $event)" @blur="syncIp1(), submitIp()" />
		<div class="ip_dot" />
		<el-input ref="ip2" :disabled="disabled" v-model="ip2" maxlength="3" @input="ip2 = ip2.replace(/[^\d]/g, '')"
			@keyup.native="keyupEvent(2, $event)" @blur="syncIp2(), submitIp()" />
		<div class="ip_dot" />
		<el-input ref="ip3" :disabled="disabled" v-model="ip3" maxlength="3" @input="ip3 = ip3.replace(/[^\d]/g, '')"
			@keyup.native="keyupEvent(3, $event)" @blur="syncIp3(), submitIp()" />
		<div class="ip_dot" />
		<el-input ref="ip4" :disabled="disabled" v-model="ip4" maxlength="3" @input="ip4 = ip4.replace(/[^\d]/g, '')"
			@keyup.native="keyupEvent(4, $event)" @blur="syncIp4(), submitIp()" />
	</div>
</template>

<script>
export default {
	name: "IpInput",
	model: {
		prop: "ipAddress",
		event: "change",
	},
	props: {
		ipAddress: {
			type: String,
			default: '',
		},
		disabled: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			ip1: "",
			ip2: "",
			ip3: "",
			ip4: "",
		};
	},
	watch: {
		ipAddress(val) {
			if (val !== null && val !== "") {
				// split()将字符串分割为子字符串数组
				const ipList = val.split(".");
				this.ip1 = ipList[0];
				this.ip2 = ipList[1];
				this.ip3 = ipList[2];
				this.ip4 = ipList[3];
			}
		},
		ip1: {
			handler: function () {
				this.$nextTick(() => {
					if (this.ip1.length === 3) {
						this.$refs.ip2.focus();
					}
				});
			},
		},
		ip2: {
			handler: function () {
				this.$nextTick(() => {
					if (this.ip2.length === 3) {
						this.$refs.ip3.focus();
					}
				});
			},
		},
		ip3: {
			handler: function () {
				this.$nextTick(() => {
					if (this.ip3.length === 3) {
						this.$refs.ip4.focus();
					}
				});
			},
		},
	},
	mounted() {
		console.log(this.ipAddress)
		if (this.ipAddress !== null && this.ipAddress !== "") {
			// split()将字符串分割为子字符串数组
			const ipList = this.ipAddress.split(".");
			this.ip1 = ipList[0];
			this.ip2 = ipList[1];
			this.ip3 = ipList[2];
			this.ip4 = ipList[3];
		}
	},
	methods: {

		// 三位数自动跳转，ip超过255设置为255，去掉前面的0
		syncIp1() {
			if (this.ip1 === "") {
				this.ip1 = "";
			} else if (parseInt(this.ip1) > 255) {
				this.ip1 = "255";
				this.$message({
					message: "这不是有效值，请指定一个0-255之间的值",
					type: "error",
				});
			} else if (this.ip1 === "0" || this.ip1 === "00" || this.ip1 === "000") {
				this.ip1 = "0";
			} else {
				this.ip1 = this.ip1.replace(/\b(0+)/g, "");
			}
		},
		syncIp2() {
			if (this.ip2 === "") {
				this.ip2 = "";
			} else if (parseInt(this.ip2) > 255) {
				this.ip2 = "255";
				this.$message({
					message: "这不是有效值，请指定一个0-255之间的值",
					type: "error",
				});
			} else if (this.ip2 === "0" || this.ip2 === "00" || this.ip2 === "000") {
				this.ip2 = "0";
			} else {
				this.ip2 = this.ip2.replace(/\b(0+)/g, "");
			}
		},
		syncIp3() {
			if (this.ip3 === "") {
				this.ip3 = "";
			} else if (parseInt(this.ip3) > 255) {
				this.ip3 = "255";
				this.$message({
					message: "这不是有效值，请指定一个0-255之间的值",
					type: "error",
				});
			} else if (this.ip3 === "0" || this.ip3 === "00" || this.ip3 === "000") {
				this.ip3 = "0";
			} else {
				this.ip3 = this.ip3.replace(/\b(0+)/g, "");
			}
		},
		syncIp4() {
			if (this.ip4 === "") {
				this.ip4 = "";
			} else if (parseInt(this.ip4) > 255) {
				this.ip4 = "255";
				this.$message({
					message: "这不是有效值，请指定一个0-255之间的值",
					type: "error",
				});
			} else if (this.ip4 === "0" || this.ip4 === "00" || this.ip4 === "000") {
				this.ip4 = "0";
			} else {
				this.ip4 = this.ip4.replace(/\b(0+)/g, "");
			}
		},
		// 失去焦点时判断输入是否完成，向父组件传递ip
		submitIp() {
			const ipVal = this.ip1 + "." + this.ip2 + "." + this.ip3 + "." + this.ip4;
			this.$emit("change", ipVal);
		},
		// 按下左键和右键焦点左右移动
		keyupEvent(index, e) {
			this.$nextTick(() => {
				// 按下'↑'键焦点左移
				if (e.keyCode === 38) {
					if (index === 2) {
						this.$refs.ip1.focus();
					} else if (index === 3) {
						this.$refs.ip2.focus();
					} else if (index === 4) {
						this.$refs.ip3.focus();
					}
				} else if (e.keyCode === 40) {
					// 按下'↓'键焦点右移
					if (index === 1) {
						this.$refs.ip2.focus();
					} else if (index === 2) {
						this.$refs.ip3.focus();
					} else if (index === 3) {
						this.$refs.ip4.focus();
					}
				}
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.ip_box {
	width: 100%;
	border-radius: 5px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;

	v-deep .el-input__inner {
		border: 0 !important;
		padding: 0;
		text-align: center;
	}


	&.disabled {
		background-color: #f5f7fa;
		color: #c0c4cc;
		cursor: not-allowed;
	}
}

v-deep .el-input {
	width: calc(100% / 4 - 10px) !important;
}

.ip_dot {
	margin-top: 10px;
	display: inline-block;
	width: 10px;
	height: 2px;
	border-radius: 50%;
	background-color: #606266;
}

.disabled {
	.ip_dot {
		background-color: #c0c4cc;
	}
}
</style>
